<?php

/* @var $this yii\web\View */
use yii\bootstrap\Alert;
use yii\helpers\Url;

$this->title = date('Y',time()).$cityModel->city_name.$jobModel->job_name."招聘工资/薪资/待遇--大牛数据平台";
?>



<div class="body">
    <div id="socialContainer">

        <div class="container">
            <div class="narrow">
                <div><div class="job-list-message">
                        <h2 class="pull-left"><?php echo date('Y',time()).$cityModel->city_name.$jobModel->job_name; ?>工资统计信息</h2>
                        <div class="pull-right">
                            <span class="blue search-key pull-left"></span>
                            <div class="pull-right">
                                <a href="#talk" style="text-decoration:none;"><span class="red">来吧！我想吐槽└(^o^)┘</span></a>
                            </div>
                        </div>
                    </div>
                    <div class="job-list">
                        <div class="list-header">

                        </div>
                        <div class="list-body" id="avgdesc" style="height:400px">

                        </div>
                        <div class="list-body" id="section" style="height:600px">

                        </div>
                    </div>
                </div>
            </div>
            <div class="narrow">
                <div><div class="job-list-message">
                        <h2 class="pull-left"><?php echo date('Y',time()).$cityModel->city_name.$jobModel->job_name; ?>30天内不同区间工资需求变化情况</h2>
                        <div class="pull-right">
                            <span class="blue search-key pull-left"></span>
<!--                            <div class="pull-right">-->
<!--                                <span class="red">--><?php //echo count($resultData); ?><!--</span>-->
<!--                                个符合职位-->
<!--                            </div>-->
                        </div>
                    </div>
                    <div class="job-list">
                        <div class="list-header">
                            <div class="list-row">
                                <div class="column1" style="width: 10%">
                                    更新
                                </div>
                                <div class="column1" style="width: 10%">
                                    面谈
                                </div>
                                <div class="column1" style="width: 10%">
                                    4k以下
                                </div>
                                <div class="column1" style="width: 10%">
                                    4k_6k
                                </div>
                                <div class="column1" style="width: 10%">
                                    6k_8k
                                </div>
                                <div class="column1" style="width: 10%">
                                    8k_10k
                                </div>
                                <div class="column1" style="width: 10%">
                                    10k_15k
                                </div>
                                <div class="column1" style="width: 10%">
                                    15k_20k
                                </div>
                                <div class="column1" style="width: 10%">
                                    20k_30k
                                </div>
                                <div class="column1" style="width: 10%">
                                    30k以上
                                </div>
                            </div>
                        </div>
                        <div class="list-body">
                            <?php
                            foreach($jobsAndCityData as $Data){

                                ?>
                                <div class="list-row">
                                    <div class="column1" style="width: 10%">
                                        <?php echo $Data['date_line'] ?>
                                    </div>
                                    <div class="column1" style="width: 10%">
                                        <?php echo $Data['talk'] ?>
                                    </div>
                                    <div class="column1" style="width: 10%">
                                        <?php echo $Data['4k'] ?>
                                    </div>
                                    <div class="column1" style="width: 10%">
                                        <?php echo $Data['4k_6k'] ?>
                                    </div>
                                    <div class="column1" style="width: 10%">
                                        <?php echo $Data['6k_8k'] ?>
                                    </div>
                                    <div class="column1" style="width: 10%">
                                        <?php echo $Data['8k_10k'] ?>
                                    </div>
                                    <div class="column1" style="width: 10%">
                                        <?php echo $Data['10k_15k'] ?>
                                    </div>
                                    <div class="column1" style="width: 10%">
                                        <?php echo $Data['15k_20k'] ?>
                                    </div>
                                    <div class="column1" style="width: 10%">
                                        <?php echo $Data['20k_30k'] ?>
                                    </div>
                                    <div class="column1" style="width: 10%">
                                        <?php echo $Data['30k'] ?>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                    <div class="job-list">
                        <div class="list-header">
                            <a name="talk"></a>
                            <h2>吐吐槽，喷喷沫！</h2>
                        </div>
                        <div class="list-body" style="padding:60px;padding-top: 30px;">
                            <!-- UY BEGIN -->
                            <div id="uyan_frame"></div>
                            <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=2070675"></script>
                            <!-- UY END -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/theme/macarons',
            'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec,theme) {
            //通过Ajax获取数据
            $.ajax({
                type: "post",
                async: false, //同步执行
                url: "index.php?r=base%2Fcityandjob&cityid=<?php echo $cityModel->id ?>&jobid=<?php echo $jobModel->id ?>",
                dataType: "json",
                success:function (result) {
                    if (result) {
                        //将返回的category和series对象赋值给options对象内的category和series
                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                        date_line = [];
                        avg =[];
                        total = [];
                        talk = [];
                        for(var row in result){
                            date_line[row] = result[row].date_line;
                            avg[row] = result[row].avg;
                            total[row] = result[row].total;
                            talk[row] = result[row].talk;
                        }
                    }
                },
                error: function (errorMsg) {
                    alert("不好意思，大爷，图表请求数据失败啦!");
                }
            });

            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('avgdesc'),theme);

            var option = {
                title : {
                    text: '最近7天变化情况',
                    subtext: ''
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['平均工资','招聘总量','面谈数']
                },
                toolbox: {
                    show : true,
                    feature : {
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : date_line
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'平均工资',
                        type:'line',
                        smooth:true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data:avg
                    },
                    {
                        name:'招聘总量',
                        type:'line',
                        smooth:true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data:total
                    },
                    {
                        name:'面谈数',
                        type:'line',
                        smooth:true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data:talk
                    }
                ]
            };





            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );

</script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/theme/macarons',
            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec,theme) {
            //通过Ajax获取数据
            $.ajax({
                type: "post",
                async: false, //同步执行
                url: "index.php?r=base%2Fsection&cityid=<?php echo $cityModel->id ?>&jobid=<?php echo $jobModel->id ?>",
                dataType: "json",
                success:function (result) {
                    if (result) {
                        //将返回的category和series对象赋值给options对象内的category和series
                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                        numup = [];
                        numdown =[];
                        for(var row in result){
                            numup[row] = result[row].up;
                            numdown[row] = result[row].down;
                        }
                        //alert(numup);
                        //alert(numdown);
                    }
                },
                error: function (errorMsg) {
                    alert("不好意思，大爷，图表请求数据失败啦!");
                }
            });

            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('section'),theme);

            var option = {
                title: {
                    text: '最新招聘量工资分布情况',
                    subtext: '',
                    sublink: ''
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        var tar = params[0];
                        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                    }
                },
                toolbox: {
                    show : true,
                    feature : {
                        saveAsImage : {show: true}
                    }
                },
                xAxis : [
                    {
                        type : 'category',
                        splitLine: {show:false},
                        data : ['汇总','面谈','4K以下','4k_6K','6k_8K','8K_10K','10k_15K','15k_20K','20K_30K','30K以上']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'辅助',
                        type:'bar',
                        stack: '总量',
                        itemStyle:{
                            normal:{
                                barBorderColor:'rgba(0,0,0,0)',
                                color:'rgba(0,0,0,0)'
                            },
                            emphasis:{
                                barBorderColor:'rgba(0,0,0,0)',
                                color:'rgba(0,0,0,0)'
                            }
                        },
                        data:numdown
                    },
                    {
                        name:'招聘量',
                        type:'bar',
                        stack: '总量',
                        itemStyle : { normal: {label : {show: true, position: 'inside'}}},
                        data:numup
                    }
                ]
            };





            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );

</script>


